<template>
    <div class='container'>
        <pageTitle titleName="月报"></pageTitle>
        <div class="chartContainer" ref="chart"> </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import pageTitle from "./pageTitle.vue"

export default {
    components: { pageTitle },
    data() {
        return {
            chartInstance: null,
            ybData: [],
        };
    },
    props: {
        fieldTypeObj: {
            type: Object,
            default: () => {
                return {
                    key: 'smIndexUnit',
                    value: 'smIndexValue',
                }
            }
        }
    },
    computed: {},
    watch: {
        fieldTypeObj: {
            handler(newVal, oldVal) {
                this.initData(this.ybData)
            },
            deep: true
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {

        initData(data = []) {
            this.ybData = data
            let xData = []
            let yData = []
            data.forEach(item => {
                xData.push(item.indexName || '')
                yData.push(Number(item?.[this.fieldTypeObj.value] || 0))
            })
            this.initChart(xData, yData);

        },
        getMore() { },
        initChart(xData = [], yData = []) {
            if (this.chartInstance) {
                this.chartInstance.dispose();
            }
            this.chartInstance = echarts.init(this.$refs.chart);
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                // backgroundColor: '#000',
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '17%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#042B78'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            interval: 0, // 强制显示所有标签
                            overflow: 'truncate', // 超出部分截断
                            ellipsis: '...' // 显示省略号
                        },
                        axisTick: {
                            show: false, // 不显示刻度线
                            alignWithLabel: true,
                            lineStyle: {
                                color: 'rgba(217, 231, 255, 0.25)'
                            }
                        },

                    }
                ],
                yAxis: [
                    {
                        name: '派单数（个）',
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 12,
                            padding: [0, 0, -5, 0] // 上下左右边距
                        },
                        type: 'value',
                        axisLabel: {
                            color: '#fff'
                        },
                        // 方法1：固定间隔
                        // interval: 50,  // 设置刻度间隔为50
                        // 或方法2：控制分割段数
                        splitNumber: 5,  // 将y轴分成5段

                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(217,231,255,0.3)'
                            },
                            onZero: false  // 关键修改：禁止分割线穿过0位置

                        },
                    }
                ],
                series: [
                    {
                        name: '柱状图数据',
                        type: 'bar',
                        barWidth: '16',
                        itemStyle: {
                            // 设置渐变色的时候，0%处的颜色不要设置透明，否则tooltip中的图例会不显示颜色
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#042B78' },
                                { offset: 1, color: '#1494FB' }
                            ])
                        },
                        label: {  // 新增label配置
                            show: true,
                            position: 'top',
                            color: '#1499FF',
                            formatter: '{c}'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                position: 'top',
                                color: '#D2FF77'
                                // fontSize: fontSize.fs18
                            }
                        },
                        data: yData,
                    },

                    {
                        name: '小横条',
                        tooltip: { show: false },
                        type: 'scatter',
                        emphasis: {
                            scale: false
                        },
                        symbol: 'rect',
                        symbolSize: [16, 2],
                        itemStyle: {
                            color: '#1499FF',
                            borderWidth: 1,
                            opacity: 1
                        },
                        z: 2,
                        data: yData,
                        animationDelay: 500
                    },

                ]
            };

            this.chartInstance.setOption(option, true);
            // 添加点击事件
            this.chartInstance.on('click', (params) => {

            });
            window.addEventListener('resize', () => {
                if (this.chartInstance) this.chartInstance.resize()
            })
        }
    },
    beforeDestroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
    },
    activated() { },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.container {
    position: relative;
    height: 100%;

    .chartContainer {
        width: 100%;
        height: calc(100% - 5vh)
    }
}
</style>